<template>
  <div class="padding" style="height:538px">
    <div class="m-t-20">
      <el-button type="success" @click="dialogTableVisible = true">
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加数据集</el-button>
    </div>
    <el-checkbox-group v-model="checkList">
      <ul class="data-group">
        <li v-for="item in tableData">
          <el-checkbox :label="item.id">{{''}}</el-checkbox><span class="data-item" @click="selectItem(item.id)" @contextmenu.prevent="$refs.ctxMenu.open($event, {item: item})">{{item.name}}</span>
        </li>
      </ul>
    </el-checkbox-group>
    <el-dialog title="添加数据集" :visible.sync="dialogTableVisible" :modal="false">
      <div class="card-con">
        <div class="card" v-for="(item, index) in dataTypes[0].types" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <div class="icon-con" :style="{background:item.background}"><i class="iconfont" :class="item.icon"></i></div>
            <input v-if="item.upload" :accept="item.ext" type="file" @change="getFile($event)">
            <div class="text">
              <span>{{item.name}}</span>
            </div>
          </el-card>
        </div>
      </div>
      <div class="tip">
        <p>示例数据下载</p>
        <a href="/static/单数据列分类数据.csv">单数据列分类数据</a>
        <a href="/static/多个数据列分类数据.csv">多个数据列分类数据</a>
        <a href="/static/时间数据.csv">时间数据</a>
      </div>
    </el-dialog>
    <context-menu id="context-menu" ref="ctxMenu" @ctx-open="onCtxOpen">
      <li @click="edit()">编辑</li>
      <li @click="confirmDelete()">删除</li>
    </context-menu>
  </div>
</template>
<script>
import btnGroup from '../../../Common/btn-group.vue'
import http from 'assets/js/http'

export default {
  props: ['dataCheckList'],
  data() {
    return {
      tableData: [],
      checkList: [],
      menuData: '',
      dialogTableVisible: false,
      dataTypes: [{
          id: 0,
          name: '导入',
          types: [{
              id: 0,
              name: 'Excel',
              icon: 'icon-excel',
              background: '#00D1A5',
              upload: true,
              ext: '.xlsx'
            }, {
              id: 0,
              name: 'csv',
              icon: 'icon-csv',
              background: '#1B3C75',
              upload: true,
              'ext': '.csv'
            },
            // {
            //   id: 0,
            //   name: 'XML',
            //   icon: 'xml',
            //   'ext': '.xml'
            // },
            //  {
            //   id: 0,
            //   name: 'JSON',
            //   icon: 'json',
            //   'ext': '.json'
            // }, 
          ]
        },
        // {
        //   id: 0,
        //   name: '数据库',
        //   types: [
        //     // {
        //     //   id: 0,
        //     //   name: 'SQL server数据库',
        //     //   icon: 'sqlserver',
        //     // }, {
        //     //   id: 0,
        //     //   name: 'Access数据库',
        //     //   icon: 'access',
        //     // }, {
        //     //   id: 0,
        //     //   name: 'Oracle数据库',
        //     //   icon: 'oracle',
        //     // }, 
        //     {
        //       id: 0,
        //       name: 'MySQL数据库',
        //       icon: 'mysql',
        //     },
        //   ]
        // }
      ],
      fileList: [],
    }
  },
  components: {
    contextMenu: resolve => require(['vue-context-menu'], resolve),
    btnGroup,
  },
  methods: {
    onCtxOpen(locals) {
      console.log('open', locals)
      this.menuData = locals
    },
    getFile(event) {
      this.file = event.target.files[0];
      console.log(this.file);
      let name = this.file.name
      this.upload(event, name)
    },
    upload(event, name) {
      let that = this
      event.preventDefault();
      let formData = new FormData();
      formData.append('name', name);
      formData.append('file', this.file);

      this.apiPost('/admin/upload', formData).then(function(res) {
        if (res.code === 200) {
          /*这里做处理*/
          window.console && console.log(res);
          that.dialogTableVisible = false
          that.fetchData()
            // this.handelResponse(res, (data) => {
          _g.toastMsg('success', '上传成功')
            // })
        }
      })
    },
    selectItem(id) {
      this.$emit('selectItem', id)
    },
    edit() {
      this.$emit('selectItem', this.menuData.item.id)
    },
    confirmDelete() {
      let that = this
      let item = this.menuData.item
      this.$confirm('确认删除该数据集?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _g.openGlobalLoading()
        this.apiDelete('admin/datas/', item.id).then((res) => {
          _g.closeGlobalLoading()
          this.handelResponse(res, (data) => {
            _g.toastMsg('success', '删除成功')
            that.fetchData()
          })
        })
      }).catch(() => {
        // handel error
      })
    },
    format(v) {
      return moment(v * 1e3).format('YYYY-MM-DD H:mm:ss')
    },
    fetchData(v) {
      this.apiGet('admin/datas').then((res) => {
        this.handelResponse(res, (data) => {
          this.tableData = data
          if (this.dataCheckList) {
            this.checkList = this.dataCheckList
          }
          if (data.length) {
            this.$emit('selectItem', data[0].id)
          }
        })
      })
    },
  },
  created() {
    this.fetchData()
  },
  computed: {},
  mixins: [http]
}
</script>
<style lang="less" scope>
ul {
  padding: 0;
}

.card-con {
  padding-left: 94px;
  input[type=file] {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
  }
  .card {
    width: 220px;
    margin: 10px;
    display: inline-block;
    .el-card__body {
      position: relative;
      &:hover .icon-con {
        opacity: 1;
      }
    }
    .icon-con {
      font-size: 100px;
      text-align: center;
      margin: auto;
      height: 166px;
      opacity: 0.8;
      i {
        font-size: 100px;
        color: #fff;
        padding-top: 30px;
        display: block;
      }
    }
    .text {
      height: 50px;
      color: #333;
      position: relative;
      margin: 0 13px;
      overflow: hidden;
      span {
        font-size: 16px;
        line-height: 46px;
        max-height: 32px;
      }
    }
  }
}

.tip {
  display: block;
  padding: 0 20px 20px;
  border-top: 1px solid #eaeaea;
  margin-top: 40px;
  p {
    color: orange;
    padding: 0;
  }
  a {
    display: block;
    color: #666;
  }
}

.data-group {
  li {
    line-height: 28px;
    .data-item {
      cursor: pointer;
    }
  }
}
</style>
